<template>
	<view class="contain" :style="{ paddingTop: setmargintop() + 'px' }">
		<!-- 1.标题 -->
		<view class="new-top-nav">
			<uni-nav-bar title="行情咨讯" @clickLeft="goHome" left-icon="left" backgroundColor="#fff" color="#000" statusBar="true"></uni-nav-bar>
		</view>
		<Province @changeProvince="changeProvince" @changeCity="changeCity" @changeArea="changeArea" @changeAreaLevel="changeAreaLevel" />
		<!-- 2.选项卡 -->
		<view class="subsection">
			<scroll-view class="select-top-bar" :scroll-x="true">
				<view v-for="(item, index) in selectViewList" :key="index" @click="selectViewFn(item, index)"
					class="select-top-bar-item" :class="{ 'selected': selected == index }">
					<view class="top-bar-item-title">{{ item.marketPlateName }}</view>
				</view>
			</scroll-view>
		</view>
		
		<view class="contain-view">
			<scroll-view :style="{height:setcollapseheight() - 35 + 'px'}" @scrolltolower="handleScrolltolowerone()"
				scroll-y="true" :scroll-top="0">
				<!-- 内容 -->
				<view class="main">
					<view class="content">
						<ArticleList @com1total="com1total" ref="ArticleListref" @setshowview="setshowview">
						</ArticleList>
						<view v-if="isshowblank" class="facility-view-nodata">
							<image class="facility-view-blankimg" mode="widthFix" src="@/static/blank.png"></image>
							<view class="facility-view-nodata-line">
								暂无数据
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import Province from '@/subPage1/components/province/index.vue'
	import ArticleList from './article-list/article-list.vue'
	import ArticleApi from '@/api/socialized-servce/market-information/index.js'
	export default {
		components: {

			ArticleList,
			Province
		},
		data() {
			return {
				selectViewList: [],
				marketPlateId: null, //板块id
				selected: 0,
				componten1key: 0, // 解决返回是组件不刷新
				isshowblank: false, //看看有没有数据
				// 上拉加载更多
				ArticleMes: {
					nowpage: 1,
					total: 0,
					isshowloading: false // 判断有没有数据要不要显示
				},
				areaLevel: '',
				provinceId: '',
				areaId: '',
				cityId: '',
			}
		},
		onPullDownRefresh() {
			this.updatacommet()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 获取分类
			getBankuaiList() {
				let params = {
					serviceProviderNo: uni.getStorageSync('serviceProviderNo')
				}
				ArticleApi.BankuaiqueryByCondition(params).then(res => {
					if (res.code == 200) {
						this.selectViewList = res.data
						this.selectViewList.forEach((el,index) =>{
							el.id = index
						})
						if(uni.getStorageSync('industryInformationMarketPlateId')) {
							this.marketPlateId = uni.getStorageSync('industryInformationMarketPlateId')
							let arr = this.selectViewList.filter(el => el.marketPlateId == this.marketPlateId)
							this.selectViewFn(arr[0],arr[0].id,true)
						} else {
							this.marketPlateId = res.data[0].marketPlateId
						}
						
						this.updatacommet()
					}
				})
			},
			selectViewFn(row, i , flag = false) {
				this.selected = i
				this.marketPlateId = row.marketPlateId
				uni.setStorageSync('industryInformationMarketPlateId', row.marketPlateId)
				if(!flag) {
					this.updatacommet()
				}
			},
			//上滑加载
			handleScrolltolowerone() {
				console.log('下拉刷新');
				let len = this.ArticleMes.nowpage * 10
				if (len >= this.ArticleMes.total) return
				this.ArticleMes.nowpage += 1
				this.ArticleMes.isshowloading = true
				const params = {
					page: this.ArticleMes.nowpage,
					size: 10,
					marketPlateId: this.marketPlateId,
					provinceId: this.provinceId,
					cityId: this.cityId,
					areaId: this.areaId,
					areaLevel: this.areaLevel,
				}
				this.$refs.ArticleListref.getShopList(this.ArticleMes.nowpage, params);
			},
			// 巡查组件分页数据总条数
			com1total(e) {
				this.ArticleMes.total = parseInt(e)
				setTimeout(() => {
					this.ArticleMes.isshowloading = false
				}, 1000)
			},
			// 组件更新相关
			updatacommet() {
				++this.componten1key;
				this.ArticleMes.nowpage = 1;
				// this.isshowCardSearch = 0;
				this.$nextTick(function() {
					let params = {
						provinceId: this.provinceId,
						cityId: this.cityId,
						areaId: this.areaId,
						areaLevel: this.areaLevel,
						marketPlateId: this.marketPlateId,
					}
					this.$refs.ArticleListref.getShopList(this.ArticleMes.nowpage, params);
				})
			},
			// 空白页
			setshowview(i) {
				if (i === -1) {
					this.isshowblank = true
				} else {
					this.isshowblank = false
				}
			},
			setcollapseheight() {
				let topheightone = uni.upx2px(136)
				let newheight = this.customBar + topheightone
				let winHeight = 0
				uni.getSystemInfo({
					success: function(res) {
						winHeight = res.windowHeight
					}
				});


				winHeight = parseInt(winHeight) - newheight
				// #ifndef H5
				winHeight = winHeight

				// #endif
				return winHeight
			},
			goHome() {
				uni.switchTab({
					url: '/pages/socialized-service/selection-system/selection-system'
				})
			},
			// 设置顶部高度
			setmargintop() {
				let top = 0
				top = this.customBar + 10
				return top
			},
			changeAreaLevel(e) {
				let params = {
					provinceId: null,
					cityId: null,
					areaId: null,
					areaLevel: e.gradeId,
					marketPlateId: this.marketPlateId,
				}
				this.provinceId = null
				this.cityId = null
				this.areaId = null
				this.areaLevel = e.gradeId
				if(e.init) {
					this.getBankuaiList()
				} else {
					this.$refs.ArticleListref.getShopList(this.ArticleMes.nowpage, params);
				}
			},
			changeProvince(e) {
				let params = {
					provinceId: e.provinceId,
					cityId: null,
					areaId: null,
					areaLevel: e.areaLevel,
					marketPlateId: this.marketPlateId,
				}
				this.provinceId = e.provinceId
				this.cityId = null
				this.areaId = null
				this.areaLevel = e.areaLevel
				if(e.init) {
					this.getBankuaiList()
				} else {
					this.$refs.ArticleListref.getShopList(this.ArticleMes.nowpage, params);
				}
			},
			changeCity(e) {
				let params = {
					provinceId: e.provinceId,
					cityId: e.cityId,
					areaId: null,
					areaLevel: e.areaLevel,
					marketPlateId: this.marketPlateId,
				}
				this.provinceId = e.provinceId
				this.cityId = e.cityId
				this.areaId = null
				this.areaLevel = e.areaLevel
				if(e.init) {
					this.getBankuaiList()
				} else{
					this.$refs.ArticleListref.getShopList(this.ArticleMes.nowpage, params);
				}
			},
			changeArea(e) {
				let {provinceId,areaLevel,cityId,areaId,init} = e
				let params = {
					provinceId: e.provinceId,
					cityId: e.cityId,
					areaId: e.areaId,
					areaLevel: e.areaLevel,
					marketPlateId: this.marketPlateId
				}
				this.provinceId = provinceId
				this.cityId = cityId
				this.areaId = areaId
				this.areaLevel = areaLevel
				if(init) {
					this.getBankuaiList()
				} else {
					this.$refs.ArticleListref.getShopList(this.ArticleMes.nowpage, params);
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.contain {
		width: 100%;
		font-size: 14px;
		line-height: 24px;

		.new-top-nav {
			width: 100%;
			position: fixed;
			top: 0;
			z-index: 99;
		}
		
		.subsection {
			padding: 0 32rpx;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #d3e6f9;

			.select-top-bar {
				width: 100%;
				justify-content: space-around;
				white-space: nowrap;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-items: center;

				.select-top-bar-item {
					display: inline-block;
					margin-right: 20rpx;
					padding-bottom: 12rpx;
					min-width: 162rpx;
					height: 60rpx;
					font-size: 30rpx;

					&.selected {
						border-bottom: 4rpx solid #0e7ae9;
					}

					&:last-child {
						margin-right: 0;
					}

					.top-bar-item-title {
						min-width: 162rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						padding: 0 10px;
					}
				}
			}
		}
		
		.contain-view {
			margin: 0 30rpx;
			position: relative;
		}
	}
	
	::v-deep .uniui-calendar:before {
		content: '';
		color: #0480FB;
	}

	::v-deep .uni-date__x-input {
		padding-left: 0;
		width: 170rpx;
	}


	.main {
		width: 100%;
		background: #F5F6FA;
		box-sizing: border-box;

		.content {
			background: #F5F6FA;
			// padding-top: 240rpx;
			padding-bottom: 20rpx;
			// padding-top: 150rpx;

			.contentItem {
				margin: 0 32rpx;
				margin-top: 16rpx;
				background-color: #FFFFFF;
				padding: 32rpx 12rpx 14rpx 12rpx;
				box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
				border-radius: 16rpx 16rpx 16rpx 16rpx;

				.header {
					position: relative;
					margin-left: 48rpx;

					.serialnumber {
						position: absolute;
						top: 0;
						left: -20rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
					}

					.title {
						font-size: 28rpx;
						font-weight: bold;
						color: #0480FB;
					}
				}

				.container {
					margin-left: 48rpx;
					margin-right: 24rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #272727;
					line-height: 38rpx;
				}

				.contentbaseline {
					margin-top: 8rpx;
					border: 1px solid #DBEDFF;
				}

				.footer {
					margin-top: 16rpx;
					margin-left: 48rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #808080;

					.oneline {
						display: flex;

						.time {
							margin-left: 70rpx;
						}
					}

					.twoline {
						margin-top: 16rpx;
					}
				}
			}
		}
	}

	.clearicon {
		width: 28rpx;
		height: 28rpx;
		border-radius: 50%;
		margin-left: -10rpx;
	}
</style>